<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Codimension Python IDE - Python Code Visualization: Slide 38</title>
  <meta name="Author" content="Sergey Satskiy">
  <meta name="description" content="Codimension is a Python IDE with a focus on graphics representation of the control flow">
  <meta name="keywords" content="codimension,python,ide,flowchart,analysis,linux,open source,free software,libre software,libre,freedom,diagram,flowchart,software,download,platform,ubuntu,fedora,debian,documentation,screenshots,home,homepage">
  <link rel="apple-touch-icon" sizes="144x144" href="../../assets/cdm/images/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="114x114" href="../../assets/cdm/images/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="../../assets/cdm/images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="57x57" href="../../assets/cdm/images/apple-touch-icon-57x57.png">
  <link rel="shortcut icon" type="image/png" href="../../assets/cdm/images/cdm-logo-64x64.png">
  <link rel="stylesheet" type="text/css" href="../../assets/cdm/css/main.css">
  <link rel="stylesheet" type="text/css" href="../../assets/cdm/css/text.css">
  <link rel="stylesheet" type="text/css" href="../../assets/cdm/css/github.css">
</head>
<body id="page-" class="">
  <div class="header">
    <div id="cleartop">
      <div id="logo">
        <a href="../../index.htm"><img src="../../assets/cdm/images/cdm-label.svg" height="64" alt="Codimension"></a>
      </div>
      <div id="header-right">
        <ul id="topdrops">
          <h2 style="border-bottom: 1px solid #ddd; font-size: 140%; font-weight: normal; margin: 1.5ex 0 0.5ex;">English</h2>
        </ul>
        <!--
          <form id="topsearch" action="search-results.html" method="get">
          <input type="text" name="search" id="q" placeholder="Search">
          <button type="submit"><img src="/assets/cdm/images/search.svg" alt="Search"/></button>
          </form>
        -->
      </div>
    </div>
    <div class="nav">
      <ul id="menu">
        <li class="child">
          <a href="../../index.htm">Home</a>
        </li>
        <li class="child">
          <a href="../../about/index.htm">About</a>
          <ul>
            <li class="child">
              <a href="../../about/features.html">Features</a>
            </li>
            <li class="child">
              <a href="../../about/screenshots.html">Screenshots</a>
            </li>
            <li class="child">
              <a href="../../about/team.html">Team</a>
            </li>
          </ul>
        </li>
        <li class="child">
          <a href="../../download/index.htm">Download</a>
          <ul>
            <li class="child">
              <a href="../../download/linuxdownload.html">Linux and Mac Download and Installation</a>
            </li>
            <li class="child">
              <a href="../../download/sourcedownload.html">Download Source Code</a>
            </li>
            <li class="child">
              <a href="../../download/runfromgit.html">Building and Running from Source</a>
            </li>
          </ul>
        </li>
        <li class="child ancestor">
          <a href="../index.htm">Documentation</a>
          <ul>
            <li class="child">
              <a href="index.htm">Visualization Technology</a>
            </li>
            <li class="child">
              <a href="../faq.html">FAQ</a>
            </li>
            <li class="child">
              <a href="../cheatsheet.html">Key Bindings & Cheatsheet</a>
            </li>
            <li class="child">
              <a href="../pluginstutorial.html">Plugins Tutorial</a>
            </li>
            <li class="child">
              <a href="../cdmpyparser.html">Brief Python Parser</a>
            </li>
            <li class="child">
              <a href="../cdmflowparser.html">Control Flow Parser</a>
            </li>
            <li class="child">
              <a href="../codimension-ide-architecture.html">Architecture</a>
            </li>
          </ul>
        </li>
        <li class="child">
          <a href="../../contribute/index.htm">Contribute</a>
          <ul>
            <li class="child">
              <a href="../../contribute/codingcontribute.html">Via Working with Code</a>
            </li>
            <li class="child">
              <a href="../../contribute/noncodingcontribute.html">Non-Coding</a>
            </li>
          </ul>
        </li>
        <li class="child">
          <a href="../../supportus.html">Support Us</a>
        </li>
      </ul>
    </div>
  </div>
  <div id="content">
    <div class="wrapper">
      <div class="breadcrumbs">
        <a href="../../index.htm">Home</a>&nbsp;&nbsp;»&nbsp;&nbsp;<a href="../index.htm">Documentation</a>&nbsp;&nbsp;»&nbsp;&nbsp;<a href="index.htm">Visualization
        Technology</a>&nbsp;&nbsp;»&nbsp;&nbsp;Python Code Visualization: Slide 38
      </div>
      <p><br></p>
      <div style="text-align:center">
        <ul class="pagination">
          <li>
            <a href="slide-37.html">&lt;</a>
          </li>
          <li>
            <a href="" class="active not-active-link">38</a>
          </li>
          <li>
            <a href="slide-39.html">&gt;</a>
          </li>
        </ul>
      </div><img class="centered" src='../../assets/cdm/visualization/img37.png' title=''>
      <p align="justify">The input for the laying out stage is a hierarchical data structure which is essentially a lossless representation of the source code. The purpose of this stage is to lay out
      all the items from the input as graphics elements on a canvas for further drawing. This is done with a help of a data structure which I called a virtual canvas. A virtual canvas is a two
      dimensional array which starts as an empty one and which can grow right and down as needed. Each cell in a virtual canvas contains an instance of a class which in most of the cases represents a
      graphics primitive we have discussed earlier or another virtual canvas. Nested virtual canvases are used for example for all the elements that use the scope idea.</p>
      <p align="justify">Lets see how it works for the example above. The virtual canvas is created as an empty one and we start with the input. The most outer container of the input is a file so a
      rounded rectangle should be drawn. The virtual canvas is extended with one row and one column in it. The cell is set to the upper left corner of the file scope rectangle. This cell is enough to
      draw the whole rounded rectangle later on so there is no need to allocate any cells for the top of the scope rectangle. The next item is the file header. Therefore the canvas is extended with
      one more row. The first allocated column in the row is for the left vertical edge of the file scope rectangle. The second column is set to the header of the file scope i.e. a text for the
      encoding and the hash bang line. We do not have a file docstring in the example so there is basically nothing else to be done for the file scope header.</p>
      <p align="justify">The next item in the input is a file scope suite. The first element in the suite container is a code block. So the canvas is extended with one more row. The first column in
      the row is set as the file scope left edge. The next column is allocated for the code block. The code block in the example has a side comment so another cell is allocated in the row and its
      content is set as the corresponding side comment.</p>
      <p align="justify">There is no need to allocate cells neither for the bottom nor for the right edges of the file scope because the scope rectangle will be drawn when the top left corner is
      found.</p>
    </div>
  </div>
  <div class="footer">
    <table width="100%">
      <tr>
        <td>
          Codimension is Free and Open Source Software licensed under the <a href="http://www.gnu.org/licenses/gpl-3.0.html">GPL v3.0</a>
        </td>
        <td align="right">
          <a href="../../sitemap.html">Sitemap</a>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>
